<template>
	<view class="content">
		<view class="header">
			<view class="title" @click="oaa()">
				<text>首页</text>
			</view>
			<view class="search">
				<view class="search_s">
					<image style="width: 34rpx; height:34rpx;" src="../../../static/home/search.png" mode=""></image>
					<input type="text" value="" placeholder="输入商品名称/品牌/关键字搜索" />
				</view>
				<image style="width: 76rpx; height: 76rpx;" src="../../../static/home/scan.png" mode=""></image>
			</view>
			<view class="banner">
				<image style="height: 290rpx; width: 90%;" src="../../../static/home/banner.png" mode=""></image>
			</view>
		</view>
		<view class="goods">
			<view class="goods_list" v-for="(item,index) in goodslist" @click="todetails()">
				<image style="width: 216rpx; height: 216rpx;" :src="item.img_url" mode=""></image>
				<view class="goods_name">
					<text>{{item.name}}</text>
				</view>
				<view class="goods_price">
					<view class="goods_da">
						￥
					</view>
					<view class="goods_nmb">
						{{item.goodsprice}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var _that
	import helper from '@/common/helper.js';
	export default {
		data() {
			return {
				goodslist: [{
						img: '../../../static/home/goods_img.png',
						goodsname: '小米',
						goodsprice: '200'
					},
					{
						img: '../../../static/home/goods_img.png',
						goodsname: '华为',
						goodsprice: '300'
					},
					{
						img: '../../../static/home/goods_img.png',
						goodsname: '锤子',
						goodsprice: '1121'
					},
					{
						img: '../../../static/home/goods_img.png',
						goodsname: '苹果',
						goodsprice: '100'
					},
					{
						img: '../../../static/home/goods_img.png',
						goodsname: '乐视',
						goodsprice: '100'
					},
					{
						img: '../../../static/home/goods_img.png',
						goodsname: '魅族',
						goodsprice: '100'
					},
					{
						img: '../../../static/home/goods_img.png',
						goodsname: '魅族',
						goodsprice: '100'
					},
					{
						img: '../../../static/home/goods_img.png',
						goodsname: '魅族',
						goodsprice: '100'
					},
					{
						img: '../../../static/home/goods_img.png',
						goodsname: '魅族',
						goodsprice: '100'
					},
					
				]
			}
		},
		onLoad() {
			_that = this
			_that.get_index();
		},
		methods: {
			todetails(){
				uni.navigateTo({
					url:'/pages/index/home/goods_details'
				})
			},
			oaa(){
				uni.navigateTo({
					url:'/pages/index/home/index'
				})
			},
			get_index(){
				uni.request({
					url: helper.web + '/api/index/getIndexGoods',
					method: 'GET',
					header:{
						token:uni.getStorageSync("token")
					},
					success: resa => {
						console.log('用户管理-首页商品展示接口', resa);
						// _that.goodslist = resa.data.data[0]
					}
				});
			}
		}
	}
</script>

<style>
	.content {
		height: 100vh;
		background: #F6F6F8;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.title {
		padding-top: 110rpx;
		display: flex;
		justify-content: center;
	}

	.title text {
		width: 64rpx;
		height: 44rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 38rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.header {
		width: 750rpx;
		height: 480rpx;
		background: linear-gradient(180deg, #298FFF 0%, rgba(78, 160, 252, 0.81) 51%, rgba(235, 232, 241, 0) 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.search {
		padding-top: 46rpx;
		width: 95%;
		display: flex;
		align-items: center;
		margin: auto;
		justify-content: center;
	}

	.search_s {
		width: 570rpx;
		height: 88rpx;
		background-color: white;
		display: flex;
		align-items: center;

	}

	.search_s input {
		margin-left: 30rpx;
		width: 95%;
	}

	.search image {
		margin-left: 24rpx;
	}

	.banner {
		display: flex;
		justify-content: center;
		margin-top: 32rpx;
	}

	.goods {
		width: 95%;
		padding-top: 162rpx;
		margin: auto;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;


	}

	.goods_list {
		margin: 20rpx auto 11rpx;
		background-color: #ffffff;
		width: 216rpx;
		height: 360rpx;
	}

	.goods_name text {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;

		text-align: left;
		font-style: normal;
		text-transform: none;
		margin: 16rpx 0 0 24rpx;
	}

	.goods_price {
		display: flex;
		align-items: center;
	}

	.goods_da {

		font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
		font-weight: bold;
		font-size: 28rpx;
		color: #409CFD;

		text-align: left;
		font-style: normal;
		text-transform: none;
		margin: 0 0 0 24rpx;
	}

	.goods_nmb {
		font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
		font-weight: bold;
		font-size: 40rpx;
		color: #409CFD;
		text-align: left;
		font-style: normal;
		text-transform: none;

	}
</style>